<template>
  <div class="h-full flex flex-col">
    <a-card style="min-height: 89vh">
      <div style="margin-left: 18px" v-if="RPAs">
        <div class="Title">{{ $t(`portal.Dpia`) }}</div>
        <a-form
          :form="form"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 21 }"
          layout="horizontal"
          labelAlign="left"
        >
          <!-- DPIA的名称 -->
          <a-form-item :label="$t('menu.account.logout1122992277994544543265')">
            <a-input
              :disabled="!RPAs"
              v-decorator="[
                'DpiaName',
                {
                  rules: [
                    {
                      required: true,
                      message: $t('menu.a'),
                    },
                  ],
                },
              ]"
              :placeholder="$t('menu.account.logout1122992277994544543265444')"
              style="width: 400px; margin-right: 30px; margin-left: 13px"
            ></a-input>
          </a-form-item>
          <!-- DPIA模板 -->
          <a-form-item
            :label="$t('user.verification-code.required11156611028')"
          >
            <a-select
              :placeholder="$t('user.verification-code.required1115661102811')"
              style="width: 409px; margin-right: 30px; margin-left: 5px"
              class="pl-[8px]"
              option-filter-prop="children"
              :filter-option="filterOption"
              :disabled="
                RpaIfCompletedPIA == 1 ||
                RpaNoPIOrImportantInvolved == 1 ||
                !RPAs
              "
              v-decorator="[
                'DpiaModelId',
                {
                  rules: [
                    {
                      required: pia,
                      message: $t(
                        'user.verification-code.required111566110577316'
                      ),
                    },
                  ],
                },
              ]"
            >
              <a-select-option
                v-for="items in dpiaSelectListsData"
                :value="items.value"
                :disabled="items.value == 1000 || items.value == 1001"
                :key="items.value"
              >
                {{ items.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            :label="$t('user.verification-code.required11156611027')"
          >
            <div>
              <a-select
                :disabled="!RPAs"
                :placeholder="
                  $t('user.verification-code.required1115661102711')
                "
                style="width: 400px; margin-right: 30px; margin-left: 13px"
                option-filter-prop="children"
                :filter-option="filterOption"
                show-search
                @change="selectinput"
                v-decorator="[
                  'DpiaRpaId',
                  {
                    rules: [
                      {
                        required: true,
                        message: $t(
                          'user.verification-code.required111566110577315'
                        ),
                      },
                    ],
                  },
                ]"
              >
                <div
                  slot="dropdownRender"
                  slot-scope="menu"
                  style="width: 100%"
                >
                  <v-nodes :vnodes="menu" />
                  <a-divider style="margin: 0px 0" />

                  <a-button
                    style="
                      display: flex;
                      justify-content: center;
                      width: 60%;
                      align-items: center;
                      margin: 6px auto;
                    "
                    type="primary"
                    @mousedown="(e) => e.preventDefault()"
                    @click="showModal()"
                    >{{ $t(`portal.rpa`) }}<a-icon type="arrow-right"
                  /></a-button>
                </div>
                <a-select-option
                  v-for="items in rpaListData"
                  :value="items.value"
                  :key="items.value"
                  >{{ items.label }}
                  <a-icon
                    type="file-search"
                    style="position: absolute; right: 10px; top: 7px"
                    @click="showsearch(items.value)"
                  />
                </a-select-option>
              </a-select>
            </div>
          </a-form-item>
        </a-form>
      </div>
      <div v-if="rpashow">Rpa查看</div>
      <!-- 底部按钮 -->
      <div
        v-if="RPAs"
        style="
          height: 77px;
          position: absolute;
          bottom: 10px;
          width: 97%;
          display: flex;
          align-items: center;
        "
      >
        <a-button style="margin: 13px 12px" @click="showGene()">
          {{ $t('Generate') }}
          <a-icon type="arrow-right" />
        </a-button>
        <a-button style="margin: 13px 12px" @click="submitSave()">{{
          $t('risk.save')
        }}</a-button>
        <a-button
          type="primary"
          @click="rollback()"
          style="margin: 13px 10px"
          >{{ $t('user.email.required11') }}</a-button
        >
      </div>
      <!-- RPA -->
      <!-- <div v-if="!RPAs">
				<Detail
					ref="addappid"
					:stateCode="stateCode"
					:sid="sid"
					:itLang="itLang"
					:state="state"
					:DpiaName="DpiaName"
					:DpiaModelId="DpiaModelId"
					:getSchoolName="getSchoolName"
					@child-event="getChildValue"
				></Detail>
			</div> -->
      <!-- DPIA -->
      <a-drawer
        title="Basic Drawer"
        placement="right"
        :closable="false"
        :visible="Gen"
        width="80%"
        @close="onCloseQ"
      >
        <Question
          ref="addappid"
          :dpiaid="dpiaid"
          :state="dpiastate"
          :itLang="itLang"
        >
        </Question>
      </a-drawer>
      <!-- RPA -->
      <a-drawer
        title=""
        placement="right"
        :closable="false"
        :visible="search"
        width="80%"
        @close="onClose"
      >
        <Detail
          ref="addappid"
          :getSchoolName="getSchoolName"
          :stateCode="stateCode"
          :sid="rpaid"
          :itLang="itLang"
          :state="state"
          :DpiaName="DpiaName"
          :DpiaModelId="DpiaModelId"
          @child-event="getChildValue"
        ></Detail>
      </a-drawer>
    </a-card>
  </div>
</template>

<script>
import form from '@/locales/lang/zh-CN/form'
import { dpiaSelectLists, rpaSelectLists } from '@/api/rpa/form'
import { rpaLists } from '@/api/ytdg'
import { configurationSelect } from '@/api/configs'
import Detail from './rpa/datailPortal.vue'
import Question from './dpia/questionnairePortal.vue'
import { dpiaQuestionsCreate } from '@/api/dpia/form'
export default {
  name: 'myPortal',
  components: {
    Detail,
    Question,
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes,
    },
  },
  data() {
    return {
      listData: [],
      dpiaSelectListsData: [],
      rpaListData: [],
      systemControllerSourceData: [],
      RPAs: true,
      Gen: false,
      stateCode: 'add',
      state: 'add',
      sid: '',
      pia: false,
      itLang: '',
      form: this.$form.createForm(this),
      RpaIfCompletedPIA: 0,
      RpaNoPIOrImportantInvolved: 0,
      pia: true,
      rpaid: '',
      //dpia
      dpiaid: '',
      dpiastate: 'see',
      search: false,
      //绑定DPIA
      DpiaName: '',
      DpiaModelId: '',
      index: 0,
      // 显示rpa
      rpashow: false,
      //引用 0 新增 1
      Newrpa: 0,
      //RPA 页面参数
    }
  },
  watch: {
    $route(to, from) {
      if (this.$route.query.Gen) {
        this.Gen = this.$route.query.Gen
        this.RPAs = true
        this.dpiastate = 'see'
        this.DpiaName = this.$route.query.DpiaName
        this.dpiaid = this.$route.query.id
      }
    },
  },
  async created() {
    if (this.$route.query.state) {
      this.state = this.$route.query.state
      ;(this.RPAs = false), (this.sid = this.$route.query.id)
      this.DpiaName = this.$route.query.DpiaName
      this.stateCode = this.$route.query.state
    }
    this.init()
    this.initSelect()
  },
  mounted() {
    let that = this
  },
  methods: {
    //下拉
    addItem() {
      console.log('addItem')
      this.items.push(`New item ${index++}`)
    },
    getSchoolName(name) {
      this.RPAs = true
      this.search = false
      this.init()
    },
    showModal() {
      this.stateCode = 'add'
      this.state = 'add'
      this.RPAs = false
    },
    showGene() {
      const {
        form: { validateFields },
      } = this

      // 按钮loading
      this.loading = true
      // validateFields 是校验form表单数据
      // force: true 是默认所有字段都校验
      // values 表单的值
      validateFields({ force: true }, async (err, values) => {
        if (!err) {
          try {
            this.confirmLoading = true
            const params = { ...values }
            console.log(params)
            const { data } = await dpiaQuestionsCreate(params)
            this.$message.success(
              this.$t('user.verification-code.required111566110577317')
            )
            this.RpaIfCompletedPIA == 0
            this.RpaNoPIOrImportantInvolved == 0
            this.pia = true
            this.dpiaid = data.Id
            this.Gen = true
          } catch (error) {
            this.$message.error(error)
          } finally {
            this.loading = false
            this.confirmLoading = false
          }
        } else {
          setTimeout(() => {
            this.loading = false
          }, 600)
        }
      })
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.indexOf(input.toLowerCase()) >=
        0
      )
    },
    onCloseQ() {
      this.$router.push({
        path: '/Portal/detail',
        query: {},
      })
      this.Gen = false
      this.search = false
    },
    onClose() {
      this.Gen = false
      this.search = false
    },
    showsearch(va) {
      this.search = true
      this.rpaid = va
      this.stateCode = 'see'
      this.state = 'see'
    },
    async init() {
      if (localStorage.getItem('lang') == '"zh-CN"') {
        this.itLang = true
      } else if (localStorage.getItem('lang') == '"zh-EN"') {
        this.itLang = false
      }
    },
    async initSelect() {
      // 加载RPA下拉
      const { data: rpaListData } = await rpaSelectLists()

      // 加载DPIA下拉
      const { data: dpiaSelectListsData } = await dpiaSelectLists()

      // 加载数据控制者数据
      const { data: systemControllerSourceData } = await configurationSelect({
        state: 11,
      })

      this.rpaListData = rpaListData
      this.systemControllerSourceData = systemControllerSourceData
      this.dpiaSelectListsData = dpiaSelectListsData
    },
    //回显到input
    async selectinput(value) {
      this.selinput = value
      let inpute = ''
      for (let i = 0; i < this.rpaListData.length; i++) {
        if (this.rpaListData[i].value == value) {
          inpute = this.rpaListData[i].label
        }
      }
      const { data } = await rpaLists({
        ...{ page: 1, pageSize: 10 },
        ...{
          RpaIds: value,
        },
      })
      // 解构赋值
      const { Lists } = data
      console.log(Lists, '列表')
      Lists.map((item, index) => {
        this.RpaIfCompletedPIA = item.RpaIfCompletedPIA
        this.RpaNoPIOrImportantInvolved = item.RpaNoPIOrImportantInvolved
        if (
          item.RpaIfCompletedPIA == 1 ||
          item.RpaNoPIOrImportantInvolved == 1
        ) {
          this.pia = false
        } else {
          this.pia = true
        }
        if (item.RpaIfCompletedPIA == 1) {
          this.form.setFieldsValue({
            DpiaModelId: 1000,
          })
        } else if (item.RpaNoPIOrImportantInvolved == 1) {
          this.form.setFieldsValue({
            DpiaModelId: 1001,
          })
        } else {
          this.form.setFieldsValue({
            DpiaModelId: '',
          })
        }
      })

      this.rpashow = true
      this.Newrpa = 1
      this.inpute = inpute
      let date = new Date()
        .toLocaleDateString()
        .split('/')
        .reduce((pre, cur, ind) => {
          if (ind && cur < 10) return pre + '0' + cur
          return pre + cur
        }, '')
    },
    // 回退
    async rollback() {
      this.$router.push('/')
    },
    //创建DPIA
    async submitSave() {
      const {
        form: { validateFields },
      } = this

      // 按钮loading
      this.loading = true
      // validateFields 是校验form表单数据
      // force: true 是默认所有字段都校验
      // values 表单的值
      validateFields({ force: true }, async (err, values) => {
        if (!err) {
          try {
            this.confirmLoading = true
            const params = { ...values }
            console.log(params)
            const { data } = await dpiaQuestionsCreate(params)
            this.$message.success(
              this.$t('user.verification-code.required111566110577317')
            )
            this.RpaIfCompletedPIA == 0
            this.RpaNoPIOrImportantInvolved == 0
            this.pia = true
            // this.dpiaid = data.Id
            // this.Gen = true
          } catch (error) {
            this.$message.error(error)
          } finally {
            this.loading = false
            this.confirmLoading = false
          }
        } else {
          setTimeout(() => {
            this.loading = false
          }, 600)
        }
      })
      // this.$message.warning(this.$t("app.setting.themecolor.rr100"));
    },

    // RPA 方法
  },
}
</script>
<style lang="less" scoped>
/deep/ .ant-table-thead {
  background: #f4f7ff;
  font-weight: 700;
}

.ant-pagination {
  float: right;
}

.Title {
  font-size: 36px;
  font-weight: 500;
  line-height: 42px;
  letter-spacing: 0em;
  text-align: left;
  margin-bottom: 10px;
}
</style>
